<template>
  	<view>
      <up-notice-bar :text="text1"></up-notice-bar>
    </view>
  <view class="home_swiper">
    <up-swiper :list="list1" :autoplay="false" @change="change"></up-swiper>
  </view>
  <view>
    <up-grid :border="false" @click="click">
      <up-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
        <up-icon :customStyle="{ paddingTop: 100 + 'rpx' }" :name="baseListItem.name" :size="22"></up-icon>
        <text class="grid-text">{{ baseListItem.title }}</text>
      </up-grid-item>
    </up-grid>
    <up-toast ref="uToastRef" />
  </view>
</template>


<script setup>
import { ref } from 'vue';
const text1 = ref('ئۇيغۇر تىلى ئۆگىنىش');
const baseList = ref([
  {
    name: 'photo',
    title: 'ھەرپ',
    url: '/pages/harp/index'
  },
  {
    name: 'lock',
    title: 'سۆزلۈك',
    url: '/pages/sozluk/index'
  },
  {
    name: 'star',
    title: 'جۈملە',
    url: '/pages/jumle/index'
  },
]);

// 创建对子组件的引用  
const uToastRef = ref(null);

// 定义方法  
const click = (name) => {
  uni.navigateTo({
    url: baseListItem.url
  });
};  


//轮播图数据
const list1 = ref([
  {
    image: 'static/tabbar/home_y.png',
    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
  },
  {
    image: '/Users/development/uniapp/trans/pages/static/tabbar/home_y.png',
    title: '身无彩凤双飞翼，心有灵犀一点通',
  },
  {
    image: 'static/tabbar/home_y.png',
    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
  },
]);
const change = (e) => {
  if (e.source !== 'autoplay') {
    console.log(e);
  }
};
</script>


<style lang="scss">
.grid-text {
  font-size: 14px;
  color: #909399;
  padding: 10rpx 0 20rpx 0rpx;
  box-sizing: border-box;
}

.home_swiper {
  width: 100%;
  height: 300rpx;
}
</style>
